<template>
  <div class="add-img-con" :style="{width:wid+'px', height:height+'px'}">
    <div v-if="imgUrl" class="img-con">
      <div class="btns-con">
        <el-button v-if="isCrop" type="primary" size="small" @click.stop="onCrop" class="btn-crop">
          <el-icon><i class="jy-icon-crop"></i></el-icon>
        </el-button>
        <el-button v-if="isDelete" type="danger" size="small" class="btn-delete" @click.stop="onDelete" >
          <el-icon><i class="jy-icon-delete"></i></el-icon>
        </el-button>
      </div>
      <img :src="imgUrl">
      <p class="info" @click.stop="onShowImgPop">点击更换</p>
    </div>
    <div v-else class="img-con" @click.stop="onShowImgPop"><i class="jy-icon-plus"></i> 添加图片</div>
  </div>
</template>
<script>
import { mapActions, mapState, mapGetters } from 'vuex'
import { MEDIAS, SITE_DEFAULT_BG } from '@/common/const'

export default {
  name: "AddImgCon",
  props: {
    isInteractionData: {
      type: Boolean,
      default: false,
    },
    isCrop: {
      type: Boolean,
      default: false,
    },
    isDelete: {
      type: Boolean,
      default: true,
    },
    btnLabel: {
      type: String,
      default: "添加图片",
    },
    url: {
      type: String,
      default: "",
    },
    height: {
      type: Number,
      default: 180,
    },
    width: {
      type: Number,
      default: 268,
    },
    index: {
      type: [Number, String],
      default: -1
    },
    qIndex: {
      type: [Number, String],
      default: -1
    },
    picAttr:String,
    comAttr:String,
    event: {
      type: Object,
      default: null,
    },
  },
  computed: {
    ...mapState({
      componentData: (state) => state.components.currentComponentData,
      page: (state) => state.components.currentPage,
      siteAttrs: state => state.components.attrs,
      mediaPop: state => state.mediaPop,

    }),
    ...mapGetters("components", {
      isSite: "isSite",
    }),
    wid(){
      return this.width >= 266 ? 266 : this.width;
    },
    imgUrl(){
      return this.url ? this.url : ''
    }
  },
  methods: {
    ...mapActions({
      setMediaPop: "setMediaPop",
      updateCurrentComponentData: "components/updateCurrentComponentData",
      updateComponentStyles: "components/updateComponentStyles",
      updateWbComponentItem: "wbComponents/updateWbComponentItem",
      updateComponentItem: "components/updateComponentItem",
      updatePageAttrs:"components/updatePageAttrs",
      updatePageStyles:"components/updatePageStyles",

      updateSiteAttrs: "components/updateSiteAttrs",
      updateSiteStyles: "components/updateSiteStyles",

      setImgCropPop:"setImgCropPop",
    }),
    onCrop() {
      let params = { url: this.url, item: MEDIAS.image, type:MEDIAS.image.type, index: this.index, qIndex: this.qIndex, picAttr:this.picAttr, comAttr:this.comAttr, event: this.event};
      this.setImgCropPop(params);
    },
    onShowImgPop() {
      let params = {item: MEDIAS.image, type: MEDIAS.image.type, index: this.index, qIndex:this.qIndex, picAttr:this.picAttr, comAttr:this.comAttr, event: this.event, isInteractionData: this.isInteractionData};
      this.setMediaPop(params);
    },
    onDelete(){
      let url = ''
      //在lists时index会传过来，否者就是默认值-1，
      if(!this.componentData){
        // let styles = {backgroundImage:'url(' + url + ')'};
        let attrs =  {bgUrl: url};
        // styles.backgroundRepeat = 'repeat';
        // styles.backgroundPosition = 'center center';
        // styles.backgroundSize = 'auto';
        if(this.isSite){
          let url_ = SITE_DEFAULT_BG;
          // styles.backgroundImage = 'url(' + url_ + ')';
          // styles.bgUrl = url_;
          this.updateSiteAttrs(attrs);
          // this.updateSiteStyles(styles);
        }else{
          this.updatePageAttrs({attrs});
          // this.updatePageStyles(styles);
        }
      }else{
        let comAttr = this.comAttr;
        let picAttr = this.picAttr;
        if(this.index >= 0){
          let data_ = {item:{}, index: this.index};
          data_.item[picAttr] = '';
          let isInteractionData = this.isInteractionData;
          let interactionData = _.cloneDeep(this.componentData.interactionData);
          if(isInteractionData){
            if(interactionData.isDimension){
              interactionData[comAttr][this.index][this.qIndex][picAttr] = '';
            }else{
              interactionData[comAttr][this.index][picAttr] = 'url';
            }
            this.$store.commit("components/updateInteractionData", { interactionData });
          }else if(this.event && this.event.controlId){
            data_.controlId = this.event.controlId
            this.updateWbComponentItem(data_);
          }else{
            if(this.qIndex >= 0){
              delete data_.item[picAttr]
              data_.item[comAttr] = []
              data_.item[comAttr][this.qIndex] = {}
              data_.item[comAttr][this.qIndex][picAttr] = '';
              this.updateComponentItem(data_);
            }else{
              this.updateComponentItem(data_);
            }
          }
        }else{
          let params = {};
          let isHaveCom = comAttr && comAttr.length > 0;
          if(isHaveCom){
            let comAttrs = comAttr.split(".")
            if(comAttrs.length > 1){
              let comAttr_ = comAttrs.shift()
              this.recursionAssignment(comAttrs.join('.'), params[comAttr_] = {}, picAttr, url)
            }else{
              params[comAttr] = {}
              params[comAttr][picAttr] = url;
            }
          }else{
            params[picAttr] = '';
          }
          // if(picAttr == 'bgUrl'){
          //   if(isHaveCom){
          //     params[comAttr].styles = {backgroundImage:'url()'};
          //   }else{
          //     params.styles = {backgroundImage:'url()'};
          //   }
          // }
          this.updateCurrentComponentData(params);
        }
      }
    },
    recursionAssignment(comAttr, params, picAttr, url){
      let comAttrs = comAttr.split(".")
      if(comAttrs.length > 1){
        let comAttr_ = comAttrs.shift()
        this.recursionAssignment(comAttrs.join('.'), params[comAttr_] = {}, picAttr, url)
      }else{
        params[comAttr] = {}
        params[comAttr][picAttr] = url;
      }
    },
  },
};
</script>
